<template>
  <div class="sui-container wrapper"> 
   <!--引用组件--> 
   <!--头部导航--> 
   <header> 
    <div class="sui-navbar"> 
     <div class="navbar-inner"> 
      <a href="/" class="sui-brand"><img src="~/assets/img/asset-logo-black.png" alt="标志图片" /></a> 
      
      <ul class="sui-nav"> 
       <router-link active-class="active" tag="li" to="/"><a>头条</a></router-link>
       <router-link active-class="active" tag="li" to="/qa"><a>问答</a></router-link>
       <router-link active-class="active" tag="li" to="/gathering"><a>活动</a></router-link>
       <router-link active-class="active" tag="li" to="/friend"><a>交友</a></router-link>
       <router-link active-class="active" tag="li" to="/spit"><a>吐槽</a></router-link>
       <router-link active-class="active" tag="li" to="/recruit"><a>招聘</a></router-link>
      </ul> 
      
      <form class="sui-form sui-form pull-left"> 
       <input type="text" placeholder="输入关键词..." /> 
       <span class="btn-search fa fa-search"></span> 
      </form> 
      
      <div v-if="user == undefined || user ==null || user.name == undefined || user.name==null" class="sui-nav pull-right info"> 
       <li><a href="/login">注册</a></li> 
       <li><a href="/login" class="sui-btn btn-login">登录</a></li>  
      </div> 
      <div  v-else class="sui-nav pull-right info"> 
       <li><a href="/manager">{{user.name}}</a></li> 
       <li><a href="/manager"><img width="30px" height="30px" :src="`${user.avatar}`"/></a></li>  
       <li><a @click="logout">退出登录</a></li>  
      </div> 
     </div> 
    </div>
   </header> 
    <nuxt/>

  <div class="footer"> 
   <div class="wrapper"> 
    <div class="footer-bottom"> 
     <div class="link"> 
      <dl> 
       <dt>
        网站相关
       </dt> 
       <dd>
        关于我们
       </dd> 
       <dd>
        服务条款
       </dd> 
       <dd>
        帮助中心
       </dd> 
       <dd>
        编辑器语法
       </dd> 
      </dl> 
      <dl> 
       <dt>
        常用链接
       </dt> 
       <dd>
        传智播客
       </dd> 
       <dd>
        传智论坛
       </dd> 
      </dl> 
      <dl> 
       <dt>
        联系我们
       </dt> 
       <dd>
        联系我们
       </dd> 
       <dd>
        加入我们
       </dd> 
       <dd>
        建议反馈
       </dd> 
      </dl> 
      <dl> 
       <dt>
        关注我们
       </dt> 
       <dd>
        微博
       </dd> 
       <dd>
        twitter
       </dd> 
      </dl> 
      <div class="xuke"> 
       <h3>内容许可</h3> 
       <p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p> 
       <p>本站由 传智研究院 提供更新服务</p> 
      </div> 
     </div> 
     <p class="Copyright">Copyright &copy; 2017 传智问答社区 当前版本 0.0.1</p> 
    </div> 
   </div> 
  </div> 
  </div>
</template>

<script>
//引入css
import "~/assets/plugins/normalize-css/normalize.css"
import "~/assets/plugins/yui/cssgrids-min.css"
import "~/assets/plugins/sui/sui.min.css"
import "~/assets/plugins/sui/sui-append.min.css"
import "~/assets/plugins/font-awesome/css/font-awesome.min.css"
import "~/assets/css/widget-base.css"
import "~/assets/css/widget-head-foot.css"
import auth from "~/utils/auth"
export default {
  data () {
    return {
      user:{}
    }
  },
  created() {

  },
  methods: {
    logout() {
      //退出登录，清空cookie
      auth.clear()
      //跳转到首页
      location.href="/"
    }
  },
  //页面初始化之后执行的js逻辑
  mounted () { 
    this.user = auth.getUser();
  }
}
</script>
